<template>
	<view class="Detailtroduce">
		<!-- 医生 -->

		<view class="docter" v-if="isshow">
			<view class="detail-cont" style="background-color:#4095e5 ;">
				<!-- 简介 -->
				<view class="de-txtra">
					<text>{{DocData.name}}</text>
					<text>{{DocData.department}}</text>
					<text>性别 {{getsex}}</text>
					<text>擅长: {{DocData.content}}</text>
				</view>
				<!-- 头像 -->
				<view class="right-img">
					<image :src="DocData.photoAddress" style="border-radius: 50%;"></image>
				</view>
				<!-- 挂件 -->
				<view class="hung-cont">
					详细
				</view>
			</view>
			<!-- 简历 -->
			<view class="textra-introduce">
				<view>
					<text>
						{{DocData.introduce}}
					</text>

				</view>
			</view>
		</view>

		<!-- 朋辈 -->
		<view class="docter" v-if="!isshow">
			<view class="detail-cont" style="background-color:#debcd0 ;">
				<!-- 简介 -->
				<view class="de-txtra">
					<text>{{FrendData.name}}</text>
					<text>{{FrendData.hobby}}</text>
					<text>{{FrendData.profession}}</text>
					<text>{{FrendData.grade}}</text>
					<text>{{FrendData.college}}</text>

				</view>
				<!-- 头像 -->
				<view class="right-img">
					<image :src="FrendData.photoAdress" style="border-radius: 50%;"></image>
				</view>
				<!-- 挂件 -->
				<view class="hung-cont">
					详细
				</view>
			</view>
			<!-- 简历 -->
			<view class="textra-introduce">
				<view>
					<text>
						{{FrendData.instructionHtml}}
					</text>

				</view>
			</view>
		</view>
		<!--  -->
	</view>
</template>

<script>
	export default {
		name: "DetailIntroduce",
		data() {
			return {

				DocData: {
					name: '',
					department: '',
					instructionHtml: ',',
					photoAddress: '',
					gender: '',
					content: '',
					introduce: ''
				},
				FrendData: {
					name: '',
					hobby: '',
					profession: '',
					grade: '',
					college: '',
					instructionHtml: '',
					photoAdress: ''
				},

			};
		},


		mounted() {
			let pages = getCurrentPages();
			const opt = (pages[pages.length - 1].options)
			// console.log(opt)
			if (JSON.parse(opt.data).department !== undefined) {
				this.GetDocterInfo(opt.id)
			} else {
				this.FrendData = JSON.parse(opt.data)
				this.FrendData.grade = JSON.parse(opt.data).年级
				// console.log(this.FrendData)
			}


		},
		methods: {
			//拿到医生详细数据
			GetDocterInfo(id) {
				let res = this.$store.dispatch('GetoneDocter', id)
				res.then(() => {
					this.DocData = this.$store.state.docter.DetailInfo
				})
			}
		},
		computed: {
			isshow() {
				if (this.DocData.department !== '') {
					return true
				} else {
					return false
				}
			},
			getsex() {
				if (this.DocData.gender == 0) {
					// console.log(this.DocData.gender)
					return '男'
				} else {
					return '女'
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.Detailtroduce {
		width: 750rpx;
		height: 550rpx;

		// background-color: antiquewhite;
		.docter {
			width: 750rpx;
			height: 550rpx;

			.detail-cont {
				width: 100%;
				height: 100%;
				// background-color: #4095e5;
				border-bottom-left-radius: 80rpx;
				border-bottom-right-radius: 80rpx;
				position: relative;

				.de-txtra {
					width: 60%;
					height: 60%;
					display: flex;
					padding-top: 40rpx;
					flex-direction: column;
					justify-content: space-around;

					text {
						color: #fff;
						padding-left: 50rpx;
						font-weight: 500;
					}
				}

				// 
				.right-img {
					width: 170rpx;
					height: 170rpx;
					border-radius: 50%;
					background-color: #e3e3e3;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 50rpx;
					top: 100rpx;

					image {
						width: 70%;
						height: 70%;
					}
				}

				// 
				.hung-cont {
					width: 180rpx;
					height: 80rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 80rpx;
					margin: 0 auto;
					position: relative;
					top: 100rpx;
					border: 1rpx solid #c2c2c2;
				}

			}

			// 
			.textra-introduce {
				width: 600rpx;
				height: auto;
				margin: 100rpx auto;

				view {
					line-height: 50rpx;
				}


			}
		}

		// 
	}
</style>
